<template>
  <el-tooltip :disabled="!showTooltip" :placement="placement">
    <template #content>
      <slot name="content">
        <div class="preview-content-wrapper">
          {{ content }}
          <div v-if="showCopy" class="copy-btn" @click="handleCopyText">复制</div>
        </div>
      </slot>
    </template>
    <div class="base-text-ellipsis" :style="{ ...customStyle, maxWidth: textWidth }">
      <slot>
        {{ content }}
      </slot>
    </div>
  </el-tooltip>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { toolCopyText } from '@/utils';
import { ElMessage } from 'element-plus';

defineOptions({ name: 'EllipsisText' });
interface IProps {
  /** 是否显示tooltip */
  showTooltip?: boolean;
  /** 文本内容 */
  content?: string;
  /** 自定义样式 */
  customStyle?: any;
  /** 自定义className */
  className?: string;
  /** 限制最大宽度 */
  width?: number | string;
  /** 是否显示复制按钮 */
  showCopy?: boolean;
  /** tooltip的位置 */
  placement?: string | string[]
}
const props = withDefaults(defineProps<IProps>(), {
  showTooltip: false,
  content: '',
  customStyle: () => ({}),
  width: 100,
  className: '',
  showCopy: false,
  placement: 'top'
});

const textWidth = computed(() => `${Number(props.width)}${Number.isNaN(props.width) ? '' : 'px'}`);

const handleCopyText = () => {
  toolCopyText(props.content);
  ElMessage.success('复制成功');
};
</script>

<style scoped lang="scss">
.preview-content-wrapper {
  position: relative;
  max-width: 800px;

  .copy-btn {
    cursor: pointer;
  }
}

.base-text-ellipsis {
  width: fit-content;
  text-align: left;
}
</style>
